<template>
  <q-scroll-area class="fit">
    <div class="q-pa-sm bg-white">
      <div class="row q-col-gutter-sm">
        <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
          <q-stepper
            v-model="step"
            header-nav
            ref="stepper"
            color="primary"
            class="no-shadow"
            bordered
            animated
          >
            <q-step
              :name="1"
              title="收货地址"
              icon="shopping_cart"
              :done="step > 1"
              :header-nav="step > 1"
            >
              <div class="row">
                <div class="col-6">
                  <q-item>
                    <q-input
                      dense
                      outlined
                      class="full-width"
                      v-model="address_detail.first_name"
                      label="姓"
                    />
                  </q-item>
                </div>
                <div class="col-6">
                  <q-item>
                    <q-input
                      dense
                      outlined
                      class="full-width"
                      v-model="address_detail.last_name"
                      label="名"
                    />
                  </q-item>
                </div>
                <div class="col-12">
                  <q-item>
                    <q-input
                      dense
                      autogrow
                      outlined
                      v-model="address_detail.address_line_1"
                      class="full-width"
                      label="地址1*"
                    />
                  </q-item>
                </div>
                <div class="col-12">
                  <q-item>
                    <q-input
                      dense
                      autogrow
                      outlined
                      v-model="address_detail.address_line_2"
                      class="full-width"
                      label="地址2"
                    />
                  </q-item>
                </div>
                <div class="col-6">
                  <q-item>
                    <q-input
                      dense
                      outlined
                      class="full-width"
                      v-model="address_detail.city"
                      label="城市"
                    />
                  </q-item>
                </div>
                <div class="col-6">
                  <q-item>
                    <q-input
                      dense
                      outlined
                      class="full-width"
                      v-model="address_detail.state"
                      label="状态"
                    />
                  </q-item>
                </div>
                <div class="col-6">
                  <q-item>
                    <q-input
                      dense
                      outlined
                      class="full-width"
                      v-model="address_detail.zip_code"
                      label="邮编"
                    />
                  </q-item>
                </div>
                <div class="col-6">
                  <q-item>
                    <q-input
                      dense
                      outlined
                      class="full-width"
                      v-model="address_detail.country"
                      label="国家"
                    />
                  </q-item>
                </div>
                <div class="col-6">
                  <q-item>
                    <q-checkbox
                      dense
                      outlined
                      class="full-width"
                      v-model="address_detail.checkbox"
                      label="使用此地址获取付款详细信息"
                    />
                  </q-item>
                </div>
              </div>

              <q-stepper-navigation>
                <q-btn
                  rounded
                  @click="
                    () => {
                      step = 2;
                    }
                  "
                  class="float-right q-mr-md q-mb-md"
                  color="blue"
                  label="下一步"
                />
              </q-stepper-navigation>
            </q-step>

            <q-step
              :name="2"
              title="付款信息"
              icon="shopping_cart"
              :done="step > 2"
              :header-nav="step > 2"
            >
              <div class="row">
                <div class="col-6">
                  <q-item>
                    <q-input
                      dense
                      outlined
                      class="full-width"
                      v-model="card_detail.name"
                      label="户名"
                    />
                  </q-item>
                </div>
                <div class="col-6">
                  <q-item>
                    <q-input
                      dense
                      outlined
                      class="full-width"
                      v-model="address_detail.card_number"
                      label="卡号"
                    />
                  </q-item>
                </div>
                <div class="col-6">
                  <q-item>
                    <q-input
                      dense
                      autogrow
                      outlined
                      v-model="address_detail.expiry_date"
                      class="full-width"
                      label="到期日期"
                    />
                  </q-item>
                </div>
                <div class="col-6">
                  <q-item>
                    <q-input
                      dense
                      autogrow
                      outlined
                      v-model="address_detail.cvv"
                      class="full-width"
                      label="有效期"
                    />
                  </q-item>
                </div>
                <div class="col-6">
                  <q-item>
                    <q-checkbox
                      dense
                      outlined
                      class="full-width"
                      v-model="address_detail.checkbox"
                      label="记住信息"
                    />
                  </q-item>
                </div>
              </div>

              <q-stepper-navigation>
                <q-btn
                  rounded
                  @click="
                    () => {
                      step = 3;
                    }
                  "
                  class="float-right q-mr-md q-mb-md"
                  color="blue"
                  label="下一步"
                />
                <q-btn
                  flat
                  @click="step = 1"
                  color="primary"
                  rounded
                  label="上一步"
                  class="q-mr-sm float-right"
                />
              </q-stepper-navigation>
            </q-step>

            <q-step
              :name="3"
              title="查看订单"
              icon="shopping_cart"
              :header-nav="step > 3"
            >
              <div class="row">
                <div class="col-12">
                  <q-item-label header class="text-h6">订单详情</q-item-label>
                  <q-item class="full-width">
                    <q-item-section>
                      <q-item-label lines="1">百合</q-item-label>
                      <q-item-label caption>纯洁</q-item-label>
                    </q-item-section>
                    <q-item-section side> 9.9 </q-item-section>
                  </q-item>
                  <q-separator></q-separator>
                  <q-item class="full-width">
                    <q-item-section>
                      <q-item-label lines="1">玫瑰</q-item-label>
                      <q-item-label caption>爱情</q-item-label>
                    </q-item-section>
                    <q-item-section side> 19.99 </q-item-section>
                  </q-item>
                  <q-separator></q-separator>
                  <q-item class="full-width">
                    <q-item-section>
                      <q-item-label lines="1">康乃馨</q-item-label>
                      <q-item-label caption>温暖</q-item-label>
                    </q-item-section>
                    <q-item-section side> 78.99 </q-item-section>
                  </q-item>
                  <q-separator></q-separator>
                  <q-item class="full-width">
                    <q-item-section>
                      <q-item-label lines="1">茉莉</q-item-label>
                      <q-item-label caption>莫离</q-item-label>
                    </q-item-section>
                    <q-item-section side> 8.99 </q-item-section>
                  </q-item>
                  <q-separator></q-separator>

                  <q-item class="full-width">
                    <q-item-section>
                      <q-item-label lines="1">购物</q-item-label>
                    </q-item-section>
                    <q-item-section side> 免费 </q-item-section>
                  </q-item>
                  <q-separator></q-separator>
                  <q-item
                    class="full-width"
                    style="border-top: 3px dotted blue"
                  >
                    <q-item-section>
                      <q-item-label lines="1">总额</q-item-label>
                    </q-item-section>
                    <q-item-section side> 288.96 </q-item-section>
                  </q-item>
                </div>
              </div>

              <q-card class="rounded-borders">
                <q-card-section horizontal>
                  <q-card-section class="col-5 q-pt-xs">
                    <div class="text-h6 text-center">购物</div>
                    <div class="text-subtitle1">六斤</div>
                    <div class="text-subtitle2">良方</div>
                  </q-card-section>
                  <q-card-section class="col-7 q-pt-xs">
                    <div class="text-h6 text-center">付款信息</div>
                    <div class="text-subtitle1 q-mb-xs">支付宝</div>
                    <div class="text-subtitle1 q-mb-xs">良方</div>
                    <div class="text-subtitle1 q-mb-xs">2342</div>
                    <div class="text-subtitle1 q-mb-xs">20230523</div>
                  </q-card-section>
                </q-card-section>
              </q-card>

              <q-stepper-navigation>
                <q-btn
                  rounded
                  class="float-right q-mr-md q-mb-md"
                  color="blue"
                  label="下单"
                />
                <q-btn
                  flat
                  @click="step = 2"
                  color="primary"
                  rounded
                  label="上一步"
                  class="q-mr-sm float-right"
                />
              </q-stepper-navigation>
            </q-step>
          </q-stepper>
        </div>
        <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
          <q-card class="bg-grey-2 no-shadow" bordered>
            <q-card-section class="text-center text-h6 text-black">
              <q-icon name="shopping_cart" class="q-mr-sm" />
              订单汇总
            </q-card-section>
            <q-card-section horizontal>
              <q-card-section class="col-5 flex flex-center">
                <q-img height="80px" class="rounded-borders" :src="baseImg" />
              </q-card-section>
              <q-card-section class="">
                <div class="text-subtitle2 q-mt-sm">爱情</div>
                <div class="text-subtitle2 q-mb-xs">288</div>
              </q-card-section>
            </q-card-section>
            <q-separator />
            <q-card-section horizontal class="q-pa-none">
              <q-card-section class="col-5 flex flex-center">
                <q-img height="80px" class="rounded-borders" :src="baseImg2" />
              </q-card-section>
              <q-card-section class="">
                <div class="text-subtitle2 q-mt-md">恋人</div>
                <div class="text-subtitle2 q-mb-xs">198</div>
              </q-card-section>
            </q-card-section>
            <q-separator />
            <q-card-section horizontal class="q-pa-none">
              <q-card-section class="col-5 flex flex-center">
                <q-img height="80px" class="rounded-borders" :src="baseImg" />
              </q-card-section>
              <q-card-section class="">
                <div class="text-subtitle2 q-mt-md">学生</div>
                <div class="text-subtitle2 q-mb-xs">9.9</div>
              </q-card-section>
            </q-card-section>
            <q-separator />
            <q-card-section horizontal class="q-pa-none">
              <q-card-section class="col-5 flex flex-center">
                <q-img height="80px" class="rounded-borders" :src="baseImg2" />
              </q-card-section>
              <q-card-section class="">
                <div class="text-subtitle2 q-mt-md">高端玩家</div>
                <div class="text-subtitle2 q-mb-xs">999.99</div>
              </q-card-section>
            </q-card-section>

            <q-separator></q-separator>
            <q-card-section class="row">
              <div class="col-12 text-h6 full-width">
                <div class="float-right q-mr-md">
                  汇总 : <span class="text-blue">19980</span>
                </div>
              </div>
            </q-card-section>
          </q-card>
        </div>
      </div>
    </div>
  </q-scroll-area>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { baseImg, baseImg2 } from './data/list';
const step = ref(1);
const address_detail = ref<{
  first_name: string;
  last_name: string;
  address_line_1: string;
  address_line_2: string;
  city: string;
  state: string;
  zip_code: string;
  country: string;
  checkbox: string;
  card_number: string;
  expiry_date: string;
  cvv: string;
}>({
  first_name: '',
  last_name: '',
  address_line_1: '',
  address_line_2: '',
  city: '',
  state: '',
  zip_code: '',
  country: '',
  checkbox: '',
  card_number: '',
  expiry_date: '',
  cvv: '',
});
const card_detail = ref<{
  name: string;
}>({
  name: '',
});
</script>

<style scoped></style>
